<template>
  <div>
    <div v-title>积分商城</div>
    <div class="banner">
        <swiper loop auto :index="banner_index" @on-index-change="banner_onIndexChange">
          <swiper-item class="swiper-img" v-for="(item, index) in banner_list" :key="index">
            <img :src="item.imageUrl">
          </swiper-item>
        </swiper>      
    </div>
    <div class="header">
      <grid style="background-color:white;">
        <grid-item  v-for="title in title_list" :label=title.name>
          <img slot="icon" v-bind:src="title.img">
        </grid-item>
      </grid>
    </div>
    <group-title style="background-color:white;margin:10px 0px 0px;font-size:20px;color:#121313;">热门商品</group-title>
    <div class="hotproduct">
      <flexbox>
      <flexbox-item style="height:100%;">
        <p class="phottitle">{{hotproduct_list[0].title+hotproduct_list[0].text}}</p>
        <img class="hotrightimg" :src="hotproduct_list[0].imageUrl">
        <i style="color:red;" class="icon iconfont icon-jifen">1000</i>
      </flexbox-item>
      <flexbox-item>
      <flexbox orient="vertical">
      <flexbox-item style="height:50%;" v-for="i in 2">
        <div class="hotproduct_left_left">
          <p class="phottitle">{{hotproduct_list[i].title}}</p>
          <i style="color:red;" class="icon iconfont icon-jifen">1000</i>
        </div>
        <div class="hotproduct_right_right">
          <img style="width:50px;height50px;" :src="hotproduct_list[i].imageUrl">        
        </div>
      </flexbox-item>
      </flexbox>
      </flexbox-item>
      </flexbox>    
    </div>
    <group-title style="background-color:white;margin:10px 0px 0px;font-size:20px;color:#121313;">积分兑换</group-title>
    <div class="product">
      <grid style="background-color:white;">
        <grid-item style="width:50%;" v-for="product in product_list">
          <img style="width:100%;height80%;" v-bind:src="product.image">
        </grid-item>
      </grid>
    </div>
  </div>
</template>

<script>
import { Flexbox, FlexboxItem,Swiper, GroupTitle, SwiperItem, XButton,Grid, 
    GridItem} from 'vux'
  import api from '../../config/api';

const baseList = [{
  url: 'javascript:',
  img: 'https://static.vux.li/demo/1.jpg',
  title: '送你一朵fua'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/3.jpg',
  title: '送你一辆车'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/3.jpg',
  title: '送你一次旅行',
  fallbackImg: 'https://static.vux.li/demo/3.jpg'
}]

const imgList = [
  'http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff',
  'http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff',
  'http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff'
]

const urlList = baseList.map((item, index) => ({
  url: 'http://m.baidu.com',
  img: item.img,
  fallbackImg: item.fallbackImg,
  title: `${item.title}`
}))

export default {
  components: {
    Swiper,
    SwiperItem,
    GridItem,
    GroupTitle,
    Grid,
    XButton,
    Flexbox,
    FlexboxItem,
  },
  //初始数据
  data () {
    return {
      banner_index:0,
      banner_list: [],
      swiperItemIndex: 1,
      title_list:[
            {
              img:require('../../assets/point.png'),
              name:"兑换积分"
            },{
              img:require('../../assets/兑换记录.png'),
              name:"积分记录"
            },{
              img:require('../../assets/规则.png'),
              name:"积分规则"
            }
      ],
      hotproduct_list:[],
      product_list:[],
    }
  },
  ready () {

  },
  mounted(){
        this.getData();
  },
  //方法
  methods: {
        onSwiperItemIndexChange (index) {
          console.log('demo item change', index)
        },
        banner_onIndexChange (index) {
            this.banner_index = index
        },
        getData(){

            this.$http.get('/api/tab/1?start=0').then((res)=>{
              this.banner_list = res.data.data.banners
              this.hotproduct_list = res.data.data.grids
              this.product_list = res.data.data.items.list
            console.log(res)

            })
        }

      }
  }
</script>

<style scoped>
.swiper-img img {
  height:100%;
  width: 100%;
}
.header grid grid-item{
  background-color: white;
  text-align:center; 
}
.header grid grid-item img{
  width: 50px;
  height: 50px;
}
.flex-demo {
  height: 100%;
  text-align: center;
  color: #7400FF;
  background-color: #20b907;
}
.hotproduct{
  margin: 0px;
  padding: 0px;
  background-color: white;
}
.phottitle{
  font-size: 12px;
  overflow: hidden;  
  display: -webkit-box;  
  -webkit-line-clamp: 2;  
  -webkit-box-orient: vertical; 
} 
.hotrightimg{
  display: block;
  width: auto;  
  height: auto;  
  max-width: 100%;  
  max-height: 100px; 
}
.hotproduct_left_left{
  float: left;
}
.hotproduct_right_right{
  float: right;
}
</style>
